<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>布局页面测试</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <link rel="stylesheet" href="../../../layui/css/layui.mobile.css">
    <style>
        /* .example {
            color:red
        }
        .pp{
            color: #79c48c
        } */
        /* .example.pp{
            color: #797979
        } */

        .example ,.pp{
            color: blue
        } 

        .example .pp{
            color:brown
        }
    </style>
</head>

<body>
    <div class="example pp">
        测试一下样式有空格的情况
        <p class="pp"> sss</p>
    </div>
    <div class="layui-container">
        常规布局（以中型屏幕桌面为例）
        <div class="layui-row  " style="background: #79c48c;  height:50px ; ">
            <div class="layui-col-md4">
                这行占据了9/12
            </div>
            <div class="layui-col-md4 " style="background: #797979">
                我的内容占3/12
            </div>
        </div>
        <br>
        <div class="layui-row " style="background: #797979">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                移动：6/12 | 平板：6/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                移动：6/12 | 平板：6/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
                移动：4/12 | 平板：12/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
                移动：4/12 | 平板：7/12 | 桌面：8/12
            </div>
            <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
                移动：4/12 | 平板：5/12 | 桌面：4/12
            </div>
        </div>


        <div class="layui-row layui-col-space5">
            <div class="layui-col-md5">
                <div class="layui-row grid-demo">
                    <div class="layui-col-md3">
                        内部列
                    </div>
                    <div class="layui-col-md9">
                        内部列
                    </div>
                    <div class="layui-col-md12">
                        内部列
                    </div>
                </div>
            </div>
            <div class="layui-col-md7">
                <div class="layui-row grid-demo grid-demo-bg1">
                    <div class="layui-col-md12">
                        内部列
                    </div>
                    <div class="layui-col-md9">
                        内部列
                    </div>
                    <div class="layui-col-md3">
                        内部列
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>